<!DOCTYPE html>
<div th:replace="~{ backend/app :: layout ('用户列表', _, ~{::#main}, _) }" xmlns:th="http://www.thymeleaf.org">
    <div class="content-wrapper" id="main">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-12 d-flex justify-content-between">
                        <h1>用户列表</h1>
                    </div>
                </div>
            </div><!-- /.container-fluid -->
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body table-responsive p-0">
                                <table class="table table-hover text-nowrap">
                                    <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>name</th>
                                        <th>Email</th>
                                        <th>Mobile</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                        <tr th:each="user : ${page.getContent()}">
                                            <th th:text="${user.id}">ID</th>
                                            <th th:text="${user.name}">Name</th>
                                            <th th:text="${user.email}">Email</th>
                                            <th th:text="${user.mobile}">Mobile</th>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                        <div id="pagination-container" class="pt-1">
                            <p class="text-muted p-1">当前第 [[${page.getNumber()+1}]] 页，总计 [[${page.getTotalPages()}]] 页，共 [[${page.getTotalElements()}]] 条记录</p>
                            <nav aria-label="Page navigation example">
                                <ul class="pagination">
                                    <li class="page-item" th:if="${page.hasPrevious()}">
                                        <a class="page-link" href="#" th:href="${'/backend/blog?page=' + page.getNumber()}">Previous</a>
                                    </li>

                                    <li th:class="${currentPageNumber == page.getNumber() + 1 ? 'page-item active' : 'page-item'}" class="page-item"
                                        th:each="currentPageNumber:${#numbers.sequence(1, page.getTotalPages())}">
                                        <a class="page-link" th:href="${'/backend/user?page=' + currentPageNumber + (#strings.isEmpty(keyword) ? '' : '&keyword=' + keyword)}" href="#" th:text="${currentPageNumber}">页码</a>
                                    </li>

                                    <li class="page-item" th:if="${page.hasNext()}">
                                        <a class="page-link" href="#" th:href="${'/backend/user?page=' + (page.getNumber() + 2)}">Next</a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>